<template>
  <div>
    <div class="lover">
      <div class="bgimg">
        <img
          src="http://www.higuang365.com/public/images/common/activity/lover/bg-top.png"
          alt=""
        />
        <div class="goodList">
          <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              v-model:error="error"
              error-text="请求失败，点击重新加载"
              :finished="finished"
              finished-text=""
              @load="onLoad"
            >
              <div class="goodlist">
                <div
                  class="good-item"
                  :class="{ goodeven: index % 2 }"
                  v-for="(value, index) in lists"
                  :key="index"
                  :sku="value.F_ProductId"
                >
                  <div
                    class="itemcard"
                    @click="
                      $router.push({
                        path: '/product',
                        query: { id: value.F_ProductId, parents_id: username },
                      })
                    "
                  >
                    <van-image
                      class="product-img"
                      lazy-load
                      :src="'http://higuang365.com/' + value.F_pic_url"
                    />
                    <div class="detail">
                      <div class="title">{{ value.F_Name }}</div>
                      <div class="price">{{ value.F_BdPrice }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onActivated,
  onDeactivated,
} from "vue";
import { GetTagGoodsList } from "@/api/home";
import { getCookie, addGoodsCart } from "@/lib/ecapi";

export default defineComponent({
  setup() {
    const count = ref(0);
    const data = reactive({
      lists: [] as any[],
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 10,
      error: false,
      username: getCookie("S[MEMBER]"),
    });
    const onLoad = async () => {
      data.loading = true;
      const res = await GetTagGoodsList({
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        tag_id: "22",
        strlv: getCookie("MLV"),
      });

      if (!res[0]) {
        data.error = true;
        data.loading = false;
        return;
      }
      data.lists.push(...res[1]);
      //   console.log(data.lists);
      data.loading = false;
      data.pageNum += 1;
      if (res[1].length < data.pageSize) {
        data.finished = true;
      }
    };

    const onRefresh = () => {
      data.lists = [];
      data.pageNum = 1;
      data.finished = false;
      onLoad();
    };
    let giftBagScroll = ref<any>(0);
    onActivated(() => {
      if (data.lists.length == 0) {
        onLoad();
      }
      (document as any).getElementById("app").scrollTop = giftBagScroll;
    });
    onDeactivated(() => {
      giftBagScroll = (document as any).getElementById("app").scrollTop;
    });
    return {
      ...toRefs(data),
      count,
      onRefresh,
      onLoad,
      giftBagScroll,
    };
  },
});
</script>

<style lang="scss" scoped>
.lover {
  min-height: 100vh;
  background: url(http://www.higuang365.com/public/images/common/activity/lover/bg.jpg)
    no-repeat;
  background-size: contain;
  img {
    display: block;
  }
}
.bgimg {
  position: relative;
}
.goodList {
  padding: 0.5rem 0 3rem;
  background: url(http://www.higuang365.com/public/images/common/activity/lover/bg-bottom.png);
  background-size: contain;

  .good-item {
    box-sizing: border-box;
    overflow: hidden;
    width: 28rem;
    height: 22rem;
    animation: jello-horizontal 1s both;
    margin: auto;
    background: url("http://www.higuang365.com/public/images/common/activity/lover/product-right.png")
      no-repeat;

    background-size: 100%;
    &.goodeven {
      background: url("http://www.higuang365.com/public/images/common/activity/lover/product-left.png")
        no-repeat;
      background-size: 100%;
      .itemcard {
        flex-direction: row-reverse;
      }
    }
  }
  .itemcard {
    display: flex;
    padding-top: 4.8rem;

    justify-content: center;

    .product-img {
      display: block;
      min-width: 11.5rem;
      width: 11.5rem;
      height: 11.5rem;
    }
    .detail {
      .title {
        padding-left: 1px;
        font-size: 1rem;
        color: #ff918d;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-weight: 800;
        width: 11.5rem;
      }
    }
    .price {
      font-size: 1.8rem;
      color: #ff908c;
      line-height: 2.5rem;
      margin-left: 3.5rem;
      letter-spacing: 1px;
      margin-top: 6.9rem;
    }
  }
}
@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
</style>
